<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .steps {
            /*margin-top: 50px;*/
            width: 400px;
            margin: 0px auto;
            margin-top: 50px;
        }

        .user {
            width: 400px;
            margin: 0px auto;
        }

        .logo-title{
            margin-left: 10px;
            text-align: center;
            height: 100px;
            line-height: 100px;
            width:100px;
            overflow:hidden;
            font-size: 24px;
            color: #333;
        }
        .have-account {
            position:absolute;right:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 16px;
            color: #999;
        }

        .have-account a {
            color: #e22;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 头部!-->
    <el-header height="100px" style="background-color: #FFFFFF;width:1395px;margin: 0 auto;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <el-container>

                        <el-aside width="100px" >
                            <img src="images/index/p2.jpg"
                                 style="width: 100%;float: left;height: 45px; position: relative;top: 30px" alt="">
                        </el-aside>
            <div class="logo-title" >忘记密码</div>
            <div class="have-account">已有账号？
                <a href="./login.html" style="">请登录&gt;
                </a>
            </div>

<!--            <el-aside width="100px" >-->
<!--                <img src="images/index/p2.jpg"-->
<!--                     style="width: 100%;float: left;height: 45px; position: relative;top: 30px" alt="">-->
<!--            </el-aside>-->
<!--            <el-main>-->


<!--&lt;!&ndash;                <h1 style="font-size: 22px;color: gray">&ndash;&gt;-->
<!--&lt;!&ndash;                    欢迎注册&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                <span style="float: right;font-size: 30px;margin-right: 15px">欢迎访问<b>学霸商城</b></span>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                </h1>&ndash;&gt;-->
<!--            </el-main>-->
        </el-container>
        <!--header 结束-->
    </el-header>

    <div class="steps">
        <el-steps :active="1" align-center>
            <el-step title="身份认证"></el-step>
            <el-step title="设置操作"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
    </div>
    <template>
        <div id="login">
            <div class="con">
                <h1>
                    <img src="../assets/images/logo.png" alt="">
                </h1>

                <div id = 'register_phone' class="user" v-if="regActiveIndex == 1">
                    <div class="reg">
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="手机号" prop="phone" >
                                <el-input v-model="ruleForm.phone" type="input" auto-complete="off" prefix-icon="el-icon-mobile" placeholder="请输入已验证手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="pass" class="pass">
                                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitPhoneNextForm()">下一步</el-button>
<!--                                <el-button type="primary" @click="submitPhoneNextForm('ruleForm','dynamicValidateForm','user')">下一步</el-button>-->
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div id = 'register_user_info' class="user" v-if="regActiveIndex == 2">
                    <div class="reg">
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form :model="dynamicValidateForm" ref="user" label-width="100px" class="demo-dynamic"  hide-required-asterisk=false>
                                <el-form-item
                                        class="pass"
                                        prop="value"
                                        label="用户名"
                                        :rules="[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    ]"
                                >
                                    <el-input v-model="dynamicValidateForm.value" ></el-input>
                                </el-form-item>
                            </el-form>
                            <el-form-item label="密码" prop="pass" class="pass">
                                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="checkPass" class="pass">
                                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm','user')">提 交</el-button>
                                <el-button @click="resetForm('ruleForm','dynamicValidateForm','user')" class="reset">重 置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <el-result title="密码找回成功!"  v-if="regActiveIndex == 3">
                    <template slot="extra">
                        <el-button type="primary" size="medium" @click="goLogin()">立即购物</el-button>
                    </template>
                </el-result>

            </div>
        </div>
    </template>

</div>
<script>
    //这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    new Vue({
        el: '#app',
        //
        //import 引入的组件需要注入到对象中才能使用
        props:[''],
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            var validatePhone = (rule, value, callback) => {
                if (!value){
                    callback(new Error('手机号不能为空！'));
                }
                //使用正则表达式进行验证手机号码
                if (!/^1[3456789]\d{9}$/.test(value)){
                    callback(new Error('手机号不正确！'));
                }
            };

            return {
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    age: '',
                    phone: ''
                },
                rules: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    phone: [
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                },
                dynamicValidateForm: {
                    value: '',
                    email: '',
                    phone:''
                },
                regActiveIndex:1,
            };
        },

        components: {},

        computed: {},


        mounted() {},

        methods: {
            goLogin(){
                location.href = "/index.html";
            },
            submitPhoneNextForm(){
                this.regActiveIndex = 2;
            },
            submitForm(formName,dynamicValidateForm,user) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                this.$refs.dynamicValidateForm.validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                this.$refs.user.validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

                this.regActiveIndex = 3;

            },
            resetForm(formName,dynamicValidateForm,user) {
                this.$refs[formName].resetFields();
                this.$refs.dynamicValidateForm.resetFields();
                this.$refs.user.resetFields();
            },
        },

    })
</script>
</body>
</html>
